/*
 * @Description: 交通线路拥有量曲线图
 * @Author: Vergil
 * @Date: 2021-09-10 22:47:23
 * @LastEditTime: 2021-10-24 23:57:29
 * @LastEditors: Vergil
 */
import { defineComponent, onMounted, reactive } from 'vue'
const trafficRoutes = defineComponent({
  name: 'TrafficRoutes',
  setup() {
    const className = 'trafficRoutes'
    const width = '100%'
    const height = '100%'
    const option = {
      tooltip: {
        trigger: 'axis',
        showDelay: 0,
        axisPointer: {
          type: 'cross',
          lineStyle: {
            type: 'dashed',
            width: 1
          },
          label: {
            backgroundColor: '#6a7985'
          }
        },
        formatter: function (params) {
          let res = ''
          params.forEach(function (item, index) {
            if (index === 0) {
              res += item.name + '<br/>'
            }
            res += item.seriesName + ' : ' + item.value + '<br/>'
          })
          return res
        },
        textStyle: {
          color: '#fff',
          fontStyle: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 12
        }
      },
      grid: {
        left: '1%',
        right: '4%',
        bottom: '6%',
        top: 30,
        containLabel: true
      },
      legend: {
        left: '10%',
        top: 'top',
        itemGap: 16,
        itemWidth: 18,
        itemHeight: 10,
        data: [{ name: '高速公路' }, { name: '城镇公路' }],
        textStyle: {
          color: '#F1F1F3',
          fontSize: 15
        }
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: true,
          data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'],
          axisLabel: {
            interval: 0,
            margin: 15,
            color: '#F1F1F3',
            fontSize: 15
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#F1F1F3'
            }
          },
          splitLine: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitNumber: 5,
          axisLabel: {
            color: '#F1F1F3',
            fontSize: 14
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#F1F1F3']
            }
          }
        }
      ],
      series: [
        {
          name: '高速公路',
          type: 'bar',
          data: [49, 73, 92, 56, 77, 56, 42, 36],
          barWidth: 10,
          barGap: 0,
          label: {
            show: false
          },
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
            color: 'rgba(240, 2, 0, 0.8)'
          }
        },
        {
          name: '城镇公路',
          type: 'bar',
          data: [29, 50, 44, 27, 57, 46, 12, 27],
          barWidth: 10,
          barGap: 0.2,
          label: {
            show: false
          },
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
            color: 'rgba(0, 204, 235, 0.8)'
          }
        }
      ]
    }
    return () => (
      <div class="borderOne">
        <echarts className={className} width={width} height={height} options={option}></echarts>
      </div>
    )
  }
})
export default trafficRoutes
